import { useReducer } from "react"
import { Row, Col, Card } from "antd"
import listReducers from './reducer'
import { ListContext, ListDispatchContext } from './context'
import AddChild from "./AddChild"
import ListChild from "./ListChild"

const list = [
  {
    id: 1,
    text: '名称1',
    state: true
  },
  {
    id: 2,
    text: '名称2',
    state: true
  },
  {
    id: 3,
    text: '名称3',
    state: false
  },
]

function StoreState() {
  const [listData, dispatch] = useReducer(listReducers, list)

  return (
    <div>
      <Row gutter={16}>
        <Col className="gutter-row" span={6}>
          <Card>
            <ListContext.Provider value={listData}>
              <ListDispatchContext.Provider value={dispatch}>
                <AddChild />
                <ListChild/>
              </ListDispatchContext.Provider>
            </ListContext.Provider>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default StoreState